/******************************************************************************
/ file: grid.css
/ author: gary wickham
/ purpose: cascading style sheet formatting for scalespot.com
******************************************************************************/
:root {
	--row-gap: 10px;
    --column-gap: 10px;
    --padding-left: 0px;
    --padding-right: 0px;
    --main-bg-color: white; /* #f5f5f5 */
    --content-text-border-radius: 10px;
    --content-text-padding-left: 0px;
    --content-text-padding-right: 0px;
    --content-text-padding: 7px;
    --content-image-padding-left: 0px;
    --content-image-padding-right: 0px;
    --content-text-margin-left: 15px;
    --content-text-margin-right: 15px;
    --content-text-margin-top: 8px;
    --content-text-margin-bottom: 8px;
    --content-image-margin-left: 15px;
    --content-image-margin-right: 15px;
    --content-image-margin-top: 8px;
    --content-image-margin-bottom: 8px;
	--content-text-howto-bg-color: #eeeeee;
	--content-shortcut-bg-color: #eeeeee;
}

.grid {
	display: grid;
	column-gap: var(--column-gap);
	row-gap: var(--row-gap);
	grid-template-columns: repeat(12, minmax(0, 1fr));
	width: 100%;
	background-color: var(--main-bg-color);
	padding-left: var(--padding-left);
	padding-right: var(--padding-right);
}

/*******************************************************************************
 Full Width content column
*******************************************************************************/
content-all {
	grid-column: 1 / 13;
	padding-left: var(--content-image-padding-left);
	padding-right: var(--content-image-padding-right);
	margin-left: var(--content-image-margin-left);
	margin-right: var(--content-image-margin-right); 	
}

/*******************************************************************************
 Content Columns
*******************************************************************************/
content-L4 {
	grid-column: 1 / 5;
}
content-L6 {
	grid-column: 1 / 7;
}
content-L8 {
	grid-column: 1 / 9;
}
content-M4 {
	grid-column: 5 / 9;
}
content-R4 {
	grid-column: 9 / 13;
}
content-R6 {
	grid-column: 7 / 13;
}
content-R8 {
	grid-column: 5 / 13;
}

/***** Self Centering versions of the grid areas *****/
content-all-centered {
	grid-column: 1 / 13;
	align-self:center;
	justify-self:center;
	border-radius: var(--content-text-border-radius);
	padding-left: var(--content-image-padding-left);
	padding-right: var(--content-image-padding-right);
	margin-left: var(--content-image-margin-left);
	margin-right: var(--content-image-margin-right);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );
}
content-L1-centered {
	grid-column: 1 / 2;
	align-self:center;
	justify-self:center;
	border-radius: var(--content-text-border-radius);
	padding-left: var(--content-image-padding-left);
	margin-left: var(--content-image-margin-left);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );
}
content-L2-centered {
	grid-column: 1 / 3;
	align-self:center;
	justify-self:center;
	border-radius: var(--content-text-border-radius);
	padding-left: var(--content-image-padding-left);
	margin-left: var(--content-image-margin-left);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );
}
content-L3-centered {
	grid-column: 1 / 4;
	align-self:center;
	justify-self:center;
	border-radius: var(--content-text-border-radius);
	padding-left: var(--content-image-padding-left);
	margin-left: var(--content-image-margin-left);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );
}
content-L3-centered.shortcut {
	background-color: var(--content-shortcut-bg-color);
	padding: 20px;
}
content-L4-centered {
	grid-column: 1 / 5;
	align-self:center;
	justify-self:center;
	border-radius: var(--content-text-border-radius);
	padding-left: var(--content-image-padding-left);
	margin-left: var(--content-image-margin-left);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );
}
content-L5-centered {
	grid-column: 1 / 6;
	align-self:center;
	justify-self:center;
	border-radius: var(--content-text-border-radius);
	padding-left: var(--content-image-padding-left);
	margin-left: var(--content-image-margin-left);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );
}
content-L6-centered {
	grid-column: 1 / 7;
	align-self: center;
	justify-self:center;
	border-radius: var(--content-text-border-radius);
	padding-left: var(--content-image-padding-left);
	margin-left: var(--content-image-margin-left);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );
}
content-L7-centered {
	grid-column: 1 / 8;
	align-self:center;
	justify-self:center;
	border-radius: var(--content-text-border-radius);
	padding-left: var(--content-image-padding-left);
	margin-left: var(--content-image-margin-left);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );
}
content-L8-centered {
	grid-column: 1 / 9;
	align-self:center;
	justify-self:center;
	border-radius: var(--content-text-border-radius);
	padding-left: var(--content-image-padding-left);
	margin-left: var(--content-image-margin-left);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );
}
content-L9-centered {
	grid-column: 1 / 10;
	align-self:center;
	justify-self:center;
	border-radius: var(--content-text-border-radius);
	padding-left: var(--content-image-padding-left);
	margin-left: var(--content-image-margin-left);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );
}
content-L10-centered {
	grid-column: 1 / 11;
	align-self:center;
	justify-self:center;
	border-radius: var(--content-text-border-radius);
	padding-left: var(--content-image-padding-left);
	margin-left: var(--content-image-margin-left);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );
}
content-L11-centered {
	grid-column: 1 / 12;
	align-self:center;
	justify-self:center;
	border-radius: var(--content-text-border-radius);
	padding-left: var(--content-image-padding-left);
	margin-left: var(--content-image-margin-left);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );
}
content-ML3-centered {
	grid-column: 4 / 7;
	align-self:center;
	justify-self:center;
	border-radius: var(--content-text-border-radius);
	padding: var(--content-text-padding);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );
}
content-ML3-centered.shortcut {
	background-color: var(--content-shortcut-bg-color);
	padding: 20px;
}
content-M4-centered {
	grid-column: 5 / 9;	
	align-self:center;
	justify-self:center;
	border-radius: var(--content-text-border-radius);
	padding: var(--content-text-padding);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );	
}
content-MR3-centered {
	grid-column: 7 / 10;
	align-self:center;
	justify-self:center;
	border-radius: var(--content-text-border-radius);
	padding: var(--content-text-padding);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );
}
content-MR3-centered.shortcut {
	background-color: var(--content-shortcut-bg-color);
	padding: 20px;
}
content-R1-centered {
	grid-column: 12 / 13;
	align-self:center;
	justify-self:center;
	border-radius: var(--content-text-border-radius);
	padding-right: var(--content-image-padding-right);
	margin-right: var(--content-image-margin-right);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );
}
content-R2-centered {
	grid-column: 11 / 13;
	align-self:center;
	justify-self:center;
	border-radius: var(--content-text-border-radius);
	padding-right: var(--content-image-padding-right);
	margin-right: var(--content-image-margin-right);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );
}
content-R3-centered {
	grid-column: 10 / 13;
	align-self:center;
	justify-self:center;
	border-radius: var(--content-text-border-radius);
	padding-right: var(--content-image-padding-right);
	margin-right: var(--content-image-margin-right);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );
}
content-R3-centered.shortcut {
	background-color: var(--content-shortcut-bg-color);
	padding: 20px;
}
content-R4-centered {
	grid-column: 9 / 13;
	align-self:center;
	justify-self:center;
	border-radius: var(--content-text-border-radius);
	padding-right: var(--content-image-padding-right);
	margin-right: var(--content-image-margin-right);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );
}
content-R5-centered {
	grid-column: 8 / 13;
	align-self:center;
	justify-self:center;
	border-radius: var(--content-text-border-radius);
	padding-right: var(--content-image-padding-right);
	margin-right: var(--content-image-margin-right);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );
}
content-R6-centered {
	grid-column: 7 / 13;
	align-self:center;
	justify-self:center;
	border-radius: var(--content-text-border-radius);
	padding-right: var(--content-image-padding-right);
	margin-right: var(--content-image-margin-right);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );
}
content-R7-centered {
	grid-column: 6 / 13;
	align-self:center;
	justify-self:center;
	border-radius: var(--content-text-border-radius);
	padding-right: var(--content-image-padding-right);
	margin-right: var(--content-image-margin-right);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );
}
content-R8-centered {
	grid-column: 5 / 13;
	align-self:center;
	justify-self:center;
	border-radius: var(--content-text-border-radius);
	padding-right: var(--content-image-padding-right);
	margin-right: var(--content-image-margin-right);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );
}
content-R9-centered {
	grid-column: 4 / 13;
	align-self:center;
	justify-self:center;
	border-radius: var(--content-text-border-radius);
	padding-right: var(--content-image-padding-right);
	margin-right: var(--content-image-margin-right);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );
}
content-R10-centered {
	grid-column: 3 / 13;
	align-self:center;
	justify-self:center;
	border-radius: var(--content-text-border-radius);
	padding-right: var(--content-image-padding-right);
	margin-right: var(--content-image-margin-right);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );
}
content-R11-centered {
	grid-column: 2 / 13;
	align-self:center;
	justify-self:center;
	border-radius: var(--content-text-border-radius);
	padding-right: var(--content-image-padding-right);
	margin-right: var(--content-image-margin-right);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );
}

/***** Align Right versions of the grid areas *****/
content-all-right {
	grid-column: 1 / 13;
	align-self:center;
	justify-self:end;
	padding-left: var(--content-image-padding-left);
	margin-left: var(--content-image-margin-left);
	padding-right: var(--content-image-padding-right);
	margin-right: var(--content-image-margin-right);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );
}
content-L1-right {
	grid-column: 1 / 2;
	align-self:center;
	justify-self:end;
	padding-left: var(--content-image-padding-left);
	margin-left: var(--content-image-margin-left);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );
}
content-L2-right {
	grid-column: 1 / 3;
	align-self:center;
	justify-self:end;
	padding-left: var(--content-image-padding-left);
	margin-left: var(--content-image-margin-left);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );
}
content-L3-right {
	grid-column: 1 / 4;
	align-self:center;
	justify-self:end;
	padding-left: var(--content-image-padding-left);
	margin-left: var(--content-image-margin-left);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );
}
content-L4-right {
	grid-column: 1 / 5;
	align-self:center;
	justify-self:end;
	padding-left: var(--content-image-padding-left);
	margin-left: var(--content-image-margin-left);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );
}
content-L6-right {
	grid-column: 1 / 7;
	align-self:center;
	justify-self:end;
	padding-left: var(--content-image-padding-left);
	margin-left: var(--content-image-margin-left);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );
}
content-L7-right {
	grid-column: 1 / 8;
	align-self:center;
	justify-self:end;
	padding-left: var(--content-image-padding-left);
	margin-left: var(--content-image-margin-left);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );		
}
content-L8-right {
	grid-column: 1 / 9;
	align-self:center;
	justify-self:end;
	padding-left: var(--content-image-padding-left);
	margin-left: var(--content-image-margin-left);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );		
}
content-L9-right {
	grid-column: 1 / 10;
	align-self:center;
	justify-self:end;
	padding-left: var(--content-image-padding-left);
	margin-left: var(--content-image-margin-left);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );		
}
content-L10-right {
	grid-column: 1 / 11;
	align-self:center;
	justify-self:end;
	padding-left: var(--content-image-padding-left);
	margin-left: var(--content-image-margin-left);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );		
}
content-L11-right {
	grid-column: 1 / 12;
	align-self:center;
	justify-self:end;
	padding-left: var(--content-image-padding-left);
	margin-left: var(--content-image-margin-left);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );		
}
content-M4-right {
	grid-column: 5 / 9;
	align-self:center;
	justify-self:end;
}
content-R1-right {
	grid-column: 12 / 13;
	align-self:center;
	justify-self:end;
	padding-right: var(--content-image-padding-right);
	margin-right: var(--content-image-margin-right);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );		
}
content-R2-right {
	grid-column: 11 / 13;
	align-self:center;
	justify-self:end;
	padding-right: var(--content-image-padding-right);
	margin-right: var(--content-image-margin-right);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );		
}
content-R3-right {
	grid-column: 10 / 13;
	align-self:center;
	justify-self:end;
	padding-right: var(--content-image-padding-right);
	margin-right: var(--content-image-margin-right);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );		
}
content-R4-right {
	grid-column: 9 / 13;
	align-self:center;
	justify-self:end;
	padding-right: var(--content-image-padding-right);
	margin-right: var(--content-image-margin-right);
}
content-R5-right {
	grid-column: 8 / 13;
	align-self:center;
	justify-self:end;
	padding-right: var(--content-image-padding-right);
	margin-right: var(--content-image-margin-right);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );		
}
content-R6-right {
	grid-column: 7 / 13;
	align-self: center;
	justify-self: end;
	padding-right: var(--content-image-padding-right);
	margin-right: var(--content-image-margin-right);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );		
}
content-R7-right {
	grid-column: 6 / 13;
	align-self: center;
	justify-self: end;
	padding-right: var(--content-image-padding-right);
	margin-right: var(--content-image-margin-right);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );		
}
content-R8-right {
	grid-column: 5 / 13;
	align-self:center;
	justify-self:end;
	padding-right: var(--content-image-padding-right);
	margin-right: var(--content-image-margin-right);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );		
}
content-R9-right {
	grid-column: 4 / 13;
	align-self:center;
	justify-self:end;
	padding-right: var(--content-image-padding-right);
	margin-right: var(--content-image-margin-right);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );		
}
content-R10-right {
	grid-column: 3 / 13;
	align-self:center;
	justify-self:end;
	padding-right: var(--content-image-padding-right);
	margin-right: var(--content-image-margin-right);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );		
}
content-R11-right {
	grid-column: 2 / 13;
	align-self:center;
	justify-self:end;
	padding-right: var(--content-image-padding-right);
	margin-right: var(--content-image-margin-right);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );		
}
content-R12-right {
	grid-column: 1 / 13;
	align-self:center;
	justify-self:end;
	padding-right: var(--content-image-padding-right);
	margin-right: var(--content-image-margin-right);
	margin-top: var(--content-image-margin-top);
	margin-bottom: var(--content-image-margin-bottom );		
}

/*** White Background versions of the grid areas *****/
content-all-text {
	grid-column: 1 / 13;
	background-color: var(--text-bg-color);
	padding-left: var(--content-text-padding-left);
	padding-right: var(--content-text-padding-right);
	margin-left: var(--content-text-margin-left);
	margin-right: var(--content-text-margin-right);
	margin-top: var(--content-text-margin-top);
	margin-bottom: var(--content-text-margin-bottom);
	border-radius: var(--content-text-border-radius);
}
content-L1-text {
	grid-column: 1 / 2;
	background-color: var(--text-bg-color);
	padding-left: var(--content-text-padding-left);
	margin-left: var(--content-text-margin-left);
	margin-top: var(--content-text-margin-top);
	margin-bottom: var(--content-text-margin-bottom);	
	border-radius: var(--content-text-border-radius);
}
content-L2-text {
	grid-column: 1 / 3;
	background-color: var(--text-bg-color);
	padding-left: var(--content-text-padding-left);
	margin-left: var(--content-text-margin-left);
	margin-top: var(--content-text-margin-top);
	margin-bottom: var(--content-text-margin-bottom);	
	border-radius: var(--content-text-border-radius);
}
content-L3-text {
	grid-column: 1 / 4;
	background-color: var(--text-bg-color);
	padding-left: var(--content-text-padding-left);
	margin-left: var(--content-text-margin-left);
	margin-top: var(--content-text-margin-top);
	margin-bottom: var(--content-text-margin-bottom);	
	border-radius: var(--content-text-border-radius);
}
content-L4-text {
	grid-column: 1 / 5;
	background-color: var(--text-bg-color);
	padding-left: var(--content-text-padding-left);
	margin-left: var(--content-text-margin-left);
	margin-top: var(--content-text-margin-top);
	margin-bottom: var(--content-text-margin-bottom);	
	border-radius: var(--content-text-border-radius);
}
content-L5-text {
	grid-column: 1 / 6;
	background-color: var(--text-bg-color);
	padding-left: var(--content-text-padding-left);
	margin-left: var(--content-text-margin-left);
	margin-top: var(--content-text-margin-top);
	margin-bottom: var(--content-text-margin-bottom);	
	border-radius: var(--content-text-border-radius);
}
content-L6-text {
	grid-column: 1 / 7;
	background-color: var(--text-bg-color);
	padding-left: var(--content-text-padding-left);
	margin-left: var(--content-text-margin-left);
	margin-top: var(--content-text-margin-top);
	margin-bottom: var(--content-text-margin-bottom);	
	border-radius: var(--content-text-border-radius);
}
content-L6-text.howto {
	background-color: var(--content-text-howto-bg-color);
	padding: 10px;
}
content-L7-text {
	grid-column: 1 / 8;
	background-color: var(--text-bg-color);
	padding-left: var(--content-text-padding-left);
	margin-left: var(--content-text-margin-left);
	margin-top: var(--content-text-margin-top);
	margin-bottom: var(--content-text-margin-bottom);	
	border-radius: var(--content-text-border-radius);
}
content-L8-text {
	grid-column: 1 / 9;
	background-color: var(--text-bg-color);
	padding-left: var(--content-text-padding-left);
	margin-left: var(--content-text-margin-left);
	margin-top: var(--content-text-margin-top);
	margin-bottom: var(--content-text-margin-bottom);	
	border-radius: var(--content-text-border-radius);
}
content-L9-text {
	grid-column: 1 / 10;
	background-color: var(--text-bg-color);
	padding-left: var(--content-text-padding-left);
	margin-left: var(--content-text-margin-left);
	margin-top: var(--content-text-margin-top);
	margin-bottom: var(--content-text-margin-bottom);	
	border-radius: var(--content-text-border-radius);
}
content-L10-text {
	grid-column: 1 / 11;
	background-color: var(--text-bg-color);
	padding-left: var(--content-text-padding-left);
	margin-left: var(--content-text-margin-left);
	margin-top: var(--content-text-margin-top);
	margin-bottom: var(--content-text-margin-bottom);	
	border-radius: var(--content-text-border-radius);
}
content-L11-text {
	grid-column: 1 / 12;
	background-color: var(--text-bg-color);
	padding-left: var(--content-text-padding-left);
	margin-left: var(--content-text-margin-left);
	margin-top: var(--content-text-margin-top);
	margin-bottom: var(--content-text-margin-bottom);	
	border-radius: var(--content-text-border-radius);
}
content-M4-text {
	grid-column: 5 / 9;
	background-color: var(--text-bg-color);
	padding: var(--content-text-padding);
	border-radius: var(--content-text-border-radius);
}
content-R1-text {
	grid-column: 12 / 13;
	background-color: var(--text-bg-color);
	padding-right: var(--content-text-padding-right);
	margin-right: var(--content-text-margin-right);
	margin-top: var(--content-text-margin-top);
	margin-bottom: var(--content-text-margin-bottom);	
	border-radius: var(--content-text-border-radius);
}
content-R2-text {
	grid-column: 11 / 13;
	background-color: var(--text-bg-color);
	padding-right: var(--content-text-padding-right);
	margin-right: var(--content-text-margin-right);
	margin-top: var(--content-text-margin-top);
	margin-bottom: var(--content-text-margin-bottom);	
	border-radius: var(--content-text-border-radius);
}
content-R3-text {
	grid-column: 10 / 13;
	background-color: var(--text-bg-color);
	padding-right: var(--content-text-padding-right);
	margin-right: var(--content-text-margin-right);
	margin-top: var(--content-text-margin-top);
	margin-bottom: var(--content-text-margin-bottom);	
	border-radius: var(--content-text-border-radius);
}
content-R4-text {
	grid-column: 9 / 13;
	background-color: var(--text-bg-color);
	padding-right: var(--content-text-padding-right);
	margin-right: var(--content-text-margin-right);
	margin-top: var(--content-text-margin-top);
	margin-bottom: var(--content-text-margin-bottom);	
	border-radius: var(--content-text-border-radius);
}
content-R5-text {
	grid-column: 8 / 13;
	background-color: var(--text-bg-color);
	padding-right: var(--content-text-padding-right);
	margin-right: var(--content-text-margin-right);
	margin-top: var(--content-text-margin-top);
	margin-bottom: var(--content-text-margin-bottom);	
	border-radius: var(--content-text-border-radius);
}
content-R6-text {
	grid-column: 7 / 13;
	background-color: var(--text-bg-color);
	padding-right: var(--content-text-padding-right);
	margin-right: var(--content-text-margin-right);
	margin-top: var(--content-text-margin-top);
	margin-bottom: var(--content-text-margin-bottom);	
	border-radius: var(--content-text-border-radius);
}
content-R6-text.howto {
	background-color: var(--content-text-howto-bg-color);
	padding: 10px;
}
content-R7-text {
	grid-column: 6 / 13;
	background-color: var(--text-bg-color);
	padding-right: var(--content-text-padding-right);
	margin-right: var(--content-text-margin-right);
	margin-top: var(--content-text-margin-top);
	margin-bottom: var(--content-text-margin-bottom);	
	border-radius: var(--content-text-border-radius);
}
content-R8-text {
	grid-column: 5 / 13;
	background-color: var(--text-bg-color);
	padding-right: var(--content-text-padding-right);
	margin-right: var(--content-text-margin-right);
	margin-top: var(--content-text-margin-top);
	margin-bottom: var(--content-text-margin-bottom);	
	border-radius: var(--content-text-border-radius);
}
content-R9-text {
	grid-column: 4 / 13;
	background-color: var(--text-bg-color);
	padding-right: var(--content-text-padding-right);
	margin-right: var(--content-text-margin-right);
	margin-top: var(--content-text-margin-top);
	margin-bottom: var(--content-text-margin-bottom);	
	border-radius: var(--content-text-border-radius);
}
content-R10-text {
	grid-column: 3 / 13;
	background-color: var(--text-bg-color);
	padding-right: var(--content-text-padding-right);
	margin-right: var(--content-text-margin-right);
	margin-top: var(--content-text-margin-top);
	margin-bottom: var(--content-text-margin-bottom);	
	border-radius: var(--content-text-border-radius);
}
content-R11-text {
	grid-column: 2 / 13;
	background-color: var(--text-bg-color);
	padding-right: var(--content-text-padding-right);
	margin-right: var(--content-text-margin-right);
	margin-top: var(--content-text-margin-top);
	margin-bottom: var(--content-text-margin-bottom);	
	border-radius: var(--content-text-border-radius);
}

/*******************************************************************************
 Chapter Row
*******************************************************************************/
chapter {
	grid-column: 1 / 13;
	background-color: var(--chapter-bg-color);
	padding-right: var(--content-text-padding-right);
	padding-left: var(--content-text-padding-left);
	margin-right: var(--content-text-margin-right);
	margin-left: var(--content-text-margin-left);
	margin-top: var(--content-text-margin-top);
	margin-bottom: var(--content-text-margin-bottom);	
	border-radius: 7px;
}

/*******************************************************************************
 Breadcrumb Row
*******************************************************************************/
breadcrumb {
	grid-column: 1 / 13;
	background-color: var(--navbar-active-color);
	border-radius: 7px;
}

/*******************************************************************************
 Footer Row
*******************************************************************************/
footer {
	grid-column: 1 / 13;
	margin-bottom: var(--row-gap);
	background-color: var(--navbar-bg-color);
/*	border-radius: 7px; */
}

/*******************************************************************************
 Media Breaks
*******************************************************************************/
@media all and (max-width: 600px) {
	content-L1,content-L1-centered,content-L1-right,
	content-L2,content-L2-centered,content-L2-right,
	content-L3,content-L3-centered,content-L3-right,
	content-L4,content-L4-centered,content-L4-right,
	content-L5,content-L5-centered,content-L5-right,
	content-L6,content-L6-centered,content-L6-right,
	content-L7,content-L7-centered,content-L7-right,
	content-L8,content-L8-centered,content-L8-right,
	content-L9,content-L9-centered,content-L9-right,
	content-L10,content-L10-centered,content-L10-right,
	content-L11,content-L11-centered,content-L11-right,
	content-M4,content-M4-centered,content-M4-right,
	content-R1,content-R1-centered,content-R1-right,
	content-R2,content-R2-centered,content-R2-right,
	content-R3,content-R3-centered,content-R3-right,
	content-R4,content-R4-centered,content-R4-right,
	content-R5,content-R5-centered,content-R5-right,
	content-R6,content-R6-centered,content-R6-right,
	content-R7,content-R7-centered,content-R7-right,
	content-R8,content-R8-centered,content-R8-right,
	content-R9,content-R9-centered,content-R9-right,
	content-R10,content-R10-centered,content-R10-right,
	content-R11,content-R11-centered,content-R11-right,
	content-L3-centered,content-ML3-centered,content-MR3-centered,content-R3-centered
	{
		grid-column: 1 / 13;
		align-self: center;
		justify-self: center;
		padding-left: var(--content-image-padding-left);
		padding-right: var(--content-image-padding-right);
		margin-left: var(--content-image-margin-left);
		margin-right: var(--content-image-margin-right);
	}
	content-L1-text,
	content-L2-text,
	content-L3-text,
	content-L4-text,
	content-L5-text,
	content-L6-text,
	content-L7-text,
	content-L8-text,
	content-L9-text,
	content-L10-text,
	content-L11-text,
	content-M4-text,
	content-R1-text,
	content-R1-text,
	content-R3-text,
	content-R4-text,
	content-R5-text,
	content-R6-text,
	content-R7-text,
	content-R8-text,
	content-R9-text,
	content-R10-text,
	content-R11-text
	{
		grid-column: 1 / 13;
		padding-left: var(--content-text-padding-left);
		padding-right: var(--content-text-padding-right);
		margin-left: var(--content-text-margin-left);
		margin-right: var(--content-text-margin-right);
	}

}